<template>
  <PageContainer>
    <BaseHeader
      v-model:header-height="headerHeight"
      v-model:opacity="opacity"
      transparent="auto"
      :is-box-height="true"
    />
    <view class="container hb-flex hb-flex-col hb-relative">
      <view class="hb-w-full hb-flex-shrink-0" :style="{ height: headerHeight + 'px' }"></view>
      <view
        class="hb-flex hb-items-center hb-justify-around hb-sticky hb-flex-shrink-0"
        :style="{ height: '204rpx', top: headerHeight + 'px', opacity: opacityValue }"
      >
        <!-- 新建圈子 -->
        <view
          class="hb-flex hb-flex-col hb-items-center hb-justify-center"
          @click="handleCreateCircle"
        >
          <view
            class="hb-w-8 hb-h-8 hb-rounded-full hb-bg-white hb-mb-2 hb-text-primary hb-flex hb-items-center hb-justify-center"
          >
            <text class="ali-icon hb-text-xl">&#xe6df;</text>
          </view>
          <text class="hb-text-xs hb-text-white">新建圈子</text>
        </view>
        <!-- 申请审核 -->
        <view
          class="hb-flex hb-flex-col hb-items-center hb-justify-center"
          @click="handleApplyAudit"
        >
          <view
            class="hb-relative hb-w-8 hb-h-8 hb-rounded-full hb-bg-white hb-mb-2 hb-text-[#E29942] hb-flex hb-items-center hb-justify-center"
          >
            <text class="ali-icon hb-text-xl">&#xe6d9;</text>
            <view
              v-if="auditMessageCount > 0"
              class="hb-absolute hb--right-1 hb--top-1 hb-flex-shrink-0 hb-h-4 hb-rounded-full hb-bg-[#EA5E0E] hb-flex hb-items-center hb-justify-center hb-border-1 hb-border-solid hb-border-white"
            >
              <text class="hb-text-white hb-text-[20rpx] hb-px-1">
                {{ auditMessageCount > 99 ? '99+' : auditMessageCount }}
              </text>
            </view>
          </view>
          <text class="hb-text-xs hb-text-white">申请审核</text>
        </view>
        <!-- 邀请好友 -->
        <view
          class="hb-flex hb-flex-col hb-items-center hb-justify-center hb-relative"
          @click="handleInviteFriends"
        >
          <button
            v-if="userInfo?.aiUserAccountBotVo"
            class="hb-absolute hb-w-full hb-h-full hb-opacity-0"
            open-type="share"
          ></button>
          <view
            class="hb-w-8 hb-h-8 hb-rounded-full hb-bg-white hb-mb-2 hb-text-primary hb-flex hb-items-center hb-justify-center"
          >
            <text class="ali-icon hb-text-xl">&#xe6ba;</text>
          </view>
          <text class="hb-text-xs hb-text-white">邀请好友</text>
        </view>
      </view>
      <view class="hb-bg-[#F7F8FA] hb-flex-1 hb-z-10 hb-rounded-tl-2xl hb-rounded-tr-2xl">
        <DataList :header-height="headerHeight" />
      </view>
    </view>
    <Tabbar path="contact" />
  </PageContainer>
</template>

<script lang="ts" setup>
  /* contact 通讯录 */
  import Tabbar from '../components/Tabbar.vue';
  import BaseHeader from '../components/BaseHeader.vue';
  import DataList from './components/DataList.vue';
  import { getUrl } from '@/router';
  import { useUserStore } from '@/store/modules/user';
  import { isCreatedAI } from '@/utils/is';

  const headerHeight = ref(44);
  const opacity = ref(1);
  const opacityValue = computed(() => Math.pow(1 - opacity.value, 3));
  const { auditMessageCount, userInfo } = storeToRefs(useUserStore());

  customOnload(() => {
    uni.hideShareMenu({
      hideShareItems: ['shareAppMessage', 'shareTimeline'],
    });
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ffffff',
    });
  });

  const handleApplyAudit = () => isCreatedAI(() => navigateTo({ name: 'applyAudit' }));
  const handleCreateCircle = () => isCreatedAI(() => navigateTo({ name: 'createCircle' }));
  const handleInviteFriends = () => {
    if (!userInfo?.value?.aiUserAccountBotVo) isCreatedAI(() => {});
  };

  onShareAppMessage(() => {
    return {
      title: '您有一个AI智能助手待激活，快来激活吧~',
      path: getUrl('inviteFriends', { uuid: useUserStore().userInfo?.aiUserAccountBotVo.uuid! }),
      imageUrl: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/invite-friends-img.png',
    };
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .container {
    background: linear-gradient(0deg, rgba(40, 120, 255, 0) 50%, #2878ff 100%), #f2f3f5;
    min-height: calc(100vh - 75px);
  }
</style>
